<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />

    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background: #333; */
        font-family: 'Arial';
        /* color: white; */
        /* font-size: 18px !important; */
      }

      h1 {
        color: grey;
      }

      .mermaid2 {
        display: none;
      }

      .mermaid svg {
        /* font-size: 18px !important; */

        /* background-color: #efefef;
        background-image: radial-gradient(#fff 51%, transparent 91%),
          radial-gradient(#fff 51%, transparent 91%);
        background-size: 20px 20px;
        background-position:
          0 0,
          10px 10px;
        background-repeat: repeat; */
      }

      .malware {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: red;
        color: black;
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
        font-size: 72px;
      }

      pre {
        width: 100%;
      }

      /* tspan {
              font-size: 6px !important;
            } */
      /* .flowchart-link {
        stroke-dasharray: 4, 4 !important;
        animation: flow 1s linear infinite;
        animation: dashdraw 4.93282s linear infinite;
        stroke-width: 2px !important;
      } */

      @keyframes dashdraw {
        from {
          stroke-dashoffset: 0;
        }
      }

      /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation:    4.932820s linear infinite;*/
      /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
    </style>
  </head>

  <body>
    <pre id="diagram4" class="mermaid">
      flowchart LR
        AB["apa@apa@"] --> B(("`apa@apa`"))
    </pre>
    <pre id="diagram4" class="mermaid">
      flowchart
        D(("for D"))
    </pre>
    <pre id="diagram4" class="mermaid">
      flowchart LR
        A e1@==> B
        e1@{ animate: true}
    </pre>
    <pre id="diagram4" class="mermaid">
flowchart LR
  A e1@--> B
  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
  class e1 animate
    </pre>
    <h2>infinite</h2>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate
    </pre>
    <h2>Mermaid - edge-animation-slow</h2>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  A e1@--> B
e1@{ animation: fast}
    </pre>
    <h2>Mermaid - edge-animation-fast</h2>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
  class e1 edge-animation-fast
    </pre>

    <pre id="diagram4" class="mermaid2">

info    </pre
    >
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
      flowchart LR
      a
      subgraph s0["APA"]
      subgraph s8["APA"]
      subgraph s1["APA"]
        D{"X"}
        E[Q]
      end
      subgraph s3["BAPA"]
        F[Q]
        I
      end
            D --> I
            D --> I
            D --> I

      I{"X"}
      end
      end
    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
      flowchart LR
      a
        D{"Use the editor"}

      D -- Mermaid js --> I{"fa:fa-code Text"}
      D-->I
      D-->I
    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
flowchart LR
 subgraph s1["Untitled subgraph"]
        n1["Evaluate"]
        n2["Option 1"]
        n3["Option 2"]
        n4["fa:fa-car Option 3"]
  end
 subgraph s2["Untitled subgraph"]
        n5["Evaluate"]
        n6["Option 1"]
        n7["Option 2"]
        n8["fa:fa-car Option 3"]
  end
    A["Start"] -- Some text --> B("Continue")
    B --> C{"Evaluate"}
    C -- One --> D["Option 1"]
    C -- Two --> E["Option 2"]
    C -- Three --> F["fa:fa-car Option 3"]
    n1 -- One --> n2
    n1 -- Two --> n3
    n1 -- Three --> n4
    n5 -- One --> n6
    n5 -- Two --> n7
    n5 -- Three --> n8
    n1@{ shape: diam}
    n2@{ shape: rect}
    n3@{ shape: rect}
    n4@{ shape: rect}
    n5@{ shape: diam}
    n6@{ shape: rect}
    n7@{ shape: rect}
    n8@{ shape: rect}

    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
flowchart LR
 subgraph s1["Untitled subgraph"]
        n1["Evaluate"]
        n2["Option 1"]
  end
    n1 -- One --> n2




    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
flowchart LR
    A{A} --> B & C
</pre
    >
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
flowchart LR
    A{A} --> B & C
    subgraph "subbe"
      A
    end
</pre
    >
    <pre id="diagram4" class="mermaid2">
---
config:
  layout: elk
---
flowchart LR
    n2@{ shape: rect}
    n3@{ shape: rect}
    n4@{ shape: rect}
    A["Start"] -- Some text --> B("Continue")
    B --> C{"Evaluate"}
    C -- One --> D["Option 1"]
    C -- Two --> E["Option 2"]
    C -- Three --> F["fa:fa-car Option 3"]
    %% C@{ shape: hexagon}


    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  kanban:
    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
---
kanban
  Backlog
    task1[📝 Define project requirements]@{ ticket: a101 }
  To Do
    task2[🔍 Research technologies]@{ ticket: a102 }
  Review
    task4[🔍 Code review for login feature]@{ ticket: a104 }
  Done
    task5[✅ Deploy initial version]@{ ticket: a105 }
  In Progress
    task3[💻 Develop login feature]@{ ticket: 103 }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }

    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
  A:::AClass
  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
flowchart LR
  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
  style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram4" class="mermaid2">
kanban
  id2[In progress]
    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
    </pre>
    <pre id="diagram4" class="mermaid2">
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
    # sectionWidth: 300
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  id7[In progress]
    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';

      const staticBellIconPack = {
        prefix: 'fa6-regular',
        icons: {
          bell: {
            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
            width: 448,
          },
        },
        width: 512,
        height: 512,
      };

      mermaid.registerIconPacks([
        {
          name: 'logos',
          loader: () =>
            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
        },
        {
          name: 'fa',
          loader: () => staticBellIconPack,
        },
      ]);
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {
        console.error('Mermaid error: ', err);
      };
      window.callback = function () {
        alert('A callback was triggered');
      };
      function callback() {
        alert('It worked');
      }
      await mermaid.initialize({
        // theme: 'base',
        // theme: 'default',
        // theme: 'forest',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
        // layout: 'dagre',
        // layout: 'elk',
        // layout: 'fixed',
        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },

        // fontFamily: 'Caveat',
        // fontFamily: 'Kalam',
        // fontFamily: 'courier',
        fontFamily: 'arial',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
          messageFontFamily: 'courier',
        },
        kanban: {
          htmlLabels: false,
        },
        fontSize: 12,
        logLevel: 0,
        securityLevel: 'loose',
        callback,
      });

      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };
    </script>
  </body>
</html>
